<template>
	<view>
		<view class="app-container">
			<view class="page-section page-section-gap">
				<map :style="{width: 100+'%',height:mapHeight+'px'}" :latitude="latitude" :longitude="longitude" :include-points="markers" :markers="markers"
				 :polyline="polyline">
				</map>
			</view>
			<actionsheet :actionData="speedData">
				<view class="farm-speed_header" @tap="speedStatus(statusType)" style="color:rgb(187, 120, 42)">
					<view class="point">
						<image src="/static/down.png" />
						<view class="point__name">
							<image src="/static/river.png" />
							<view>{{storeInfo.rivername.value}}</view>
						</view>
					</view>
				</view>
				<view class="farm-speed_water" style="margin:22rpx 0">

				</view>
				<scroll-view class="shop-base-info" scroll-y style="height:560rpx">
					<view class="item" v-for="(descItem, descIndex) in descData" :key="descIndex" @click="handle(descIndex)">
						<view class="name">{{ descItem.name || ""}}</view>
						<view class="desc">{{ descItem.desc.value || ""}}</view>
					</view>
					<view class="base">
						<view class="app__title">河段描述</view>
					</view>
					<view class="manage__box" :style="{display:clear}">
						<view class="manage__item">
							<view class="name">描述: </view>
							<view>{{storeInfo.desc.value}}</view>
						</view>
					</view>
				</scroll-view>
			</actionsheet>
		</view>
	</view>
</template>

<script>
	import actionsheet from "@/components/actionsheet/actionsheet.vue"
	export default {
		name: 'MerchantDetail',
		data() {
			return {
				title: 'map',
				latitude: 28.28,
				longitude: 113.80,
				markers: [{
					title: '我在哪，我在哪',
					latitude: 28.28,
					longitude: 113.80,
					iconPath: '/static/location.png',
				}, {
					latitude: 28.25,
					longitude: 112.98,
					iconPath: '/static/location.png',
					title: '故宫',
				}],
				polyline: [{
					'points': [{
						latitude: 28.28,
						longitude: 113.80,
					}, {
						latitude: 28.25,
						longitude: 112.98,
					}],
					color: '#000000',
					width: 3
				}],
				// 加速种植弹窗
				speedData: {
					actionHeight: 360,
					showAction: true
				},
				statusType: true,
				storeInfo: {},
				desc: "",
				mapHeight: 0,
				layerChildHeight: 0
			}
		},
		components: {
			actionsheet
		},
		computed: {
			/* 描述店铺基本数据 电话、行业、地址等 */
			descData() {
				return [{
					name: '创建时间：',
					desc: this.storeInfo.createTime,
				}, {
					name: '所属行政区：',
					desc: this.storeInfo.headstream,
				}, {
					name: '所属河道：',
					desc: this.storeInfo.riverlevel,
				}, {
					name: '开始经纬度：',
					desc: this.storeInfo.opencoordinate,
				}, {
					name: '结束经纬度：',
					desc: this.storeInfo.endcoordinate,
				}]
			}
		},
		onLoad(event) {
			// 获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.screenHeight)
					this.mapHeight = res.screenHeight - this.speedData.actionHeight / 2
				}
			});
			// 目前在某些平台参数会被主动 decode，暂时这样处理。
			try {
				this.storeInfo = JSON.parse(decodeURIComponent(event.detailDate));
			} catch (error) {
				this.storeInfo = JSON.parse(event.detailDate);
			}
		},
		methods: {
			speedStatus(statusType) {
				console.log(statusType)
				if (statusType) {
					this.speedData.actionHeight = 700;
					this.statusType = !this.statusType
				} else {
					this.speedData.actionHeight = 360;
					this.statusType = !this.statusType
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin item {
		view {
			display: inline-block;
			vertical-align: middle;
			font-size: 26upx;
			color: #333333;
			line-height: 60upx;

			&:first-child {
				color: rgba(153, 153, 153, 1);
			}
		}
	}


	.app-container {
		.app__title {
			position: relative;
			font-size: 30upx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			padding: 34upx 0 24upx 42upx;
			margin: 0 26upx 0 0;
			margin-right: auto;

			&::before {
				position: absolute;
				left: 0;
				display: block;
				content: '';
				width: 10upx;
				height: 32upx;
				background: rgba(67, 107, 230, 1);
			}
		}

		.app__info {
			margin-left: 22upx;
		}

		.point {
			text-align: center;
			overflow: hidden;
			border-bottom: 1upx solid rgba(0, 0, 0, .1);
			image {
				display: inline-block;
				vertical-align: middle;
				margin-right: 20upx;
				width: 28upx;
				height: 28upx;
			}
			&__name {
				margin-bottom:26upx;

				image {
					display: inline-block;
					vertical-align: middle;
					margin-right: 20upx;
					width: 34upx;
					height: 33upx;
				}

				view {
					display: inline-block;
					vertical-align: middle;
					font-size: 36upx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}
			}

			&__desc {
				margin-top: 40upx;
				font-size: 24upx;
				color: rgba(244, 54, 54, 1);
			}

			&__offer {
				margin-top: 20upx;
				font-size: 24upx;
				color: #999999;
			}
		}

		.base {
			padding-bottom: 10upx;
			line-height: 30upx;

			&__time {
				margin-left: 48upx;
				@include item;

				.left {
					margin-left: 17upx;
				}
			}

		}

		.manage {
			@include flexLine;

			&__box {
				border: 1upx solid rgba(0, 0, 0, .1);
				border-radius: 8upx;
				padding: 10upx 24upx 10upx;
				margin: 8upx 24upx 24upx 34upx;

				.manage__item-title {
					position: relative;
					font-size: 28upx;
					color: rgba(51, 51, 51, 1);
					padding-left: 26upx;
					margin-bottom: 20upx;
				}

				.manage__item {
					@include item;

					.name {
						margin-right: 12upx;
					}
				}
			}

			&_info {
				@include fzc(28upx, #436be6);
				margin: 17upx 31upx 0 0;
			}
		}
	}

	.shop-base-info {
		.item {
			@include flexLine;

			* {
				font-size: 26upx;
				line-height: 30upx;
			}

			.name {
				margin: 17upx 0 17upx 26upx;
				width: 180upx;
				@include fzc(26upx, #999);
			}

			.desc {
				margin: 17upx 26upx 17upx 0;
				margin-right: auto;
				@include ellipsis;
				width: 20em;
				@include fzc(26upx, #333);
			}

			.phone {
				margin: 17upx 31upx 17upx 0;
				width: 27upx;
				height: 28upx;
			}

			.location {
				margin: 17upx 31upx 17upx 0;
				width: 25upx;
				height: 30upx;
			}
		}
	}
</style>
